import * as echarts from "echarts";
export const options1: echarts.EChartsCoreOption = {
  color: ["#2f89cf"],
  grid: {
    left: "3%",
    top: "3%",
    right: "0",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: [
      "旅游行业",
      "教育培训",
      "游戏行业",
      "医疗行业",
      "电商行业",
      "社交行业",
      "金融行业",
    ],
    axisLabel: {
      color: "rgba(255,255,255,.6)",
    },
  },
  yAxis: {
    type: "value",
    // y 轴分割线
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)",
      },
    },
  },
  series: [
    {
      data: [200, 300, 300, 900, 1500, 1200, 600],
      type: "bar",
      barWidth: "35%",
      itemStyle: {
        barBorderRadius: [5, 5, 0, 0],
      },
    },
  ],
};
// 声明颜色数组
const options2MyColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
export const options2: echarts.EChartsCoreOption = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    top: "10%",
    left: "22%",
    right: "10%",
    bottom: "10%",
  },
  xAxis: {
    // type: "value",
    // boundaryGap: [0, 0.01],
    show: false,
  },
  yAxis: [
    {
      type: "category",
      data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
      // 不显示y轴的线
      axisLine: {
        show: false,
      },
      // 不显示刻度
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
      },
    },
    {
      show: true,
      data: [702, 350, 610, 793, 664],
      // 不显示y轴的线
      axisLine: {
        show: false,
      },
      // 不显示刻度
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          fontSize: 12,
          color: "#fff",
        },
      },
    },
  ],
  series: [
    {
      yAxisIndex: 0,
      name: "条",
      type: "bar",
      data: [70, 34, 60, 78, 69],
      // 柱子之间的距离
      barCategoryGap: 50,
      //柱子的宽度
      barWidth: 10,
      // 柱子设为圆角
      itemStyle: {
        normal: {
          barBorderRadius: 20,
          color(params: any) {
            return options2MyColor[params.dataIndex];
          },
        },
      },
      // 内容文本
      label: {
        normal: {
          show: true,
          // 图形内显示
          position: "inside",
          // 文字的显示格式
          formatter: "{c}%",
        },
      },
    },
    {
      yAxisIndex: 1,
      name: "框",
      type: "bar",
      barCategoryGap: 50,
      barWidth: 15,
      itemStyle: {
        color: "none",
        borderColor: "#00c1de",
        borderWidth: 3,
        barBorderRadius: 15,
      },
      data: [100, 100, 100, 100, 100],
    },
  ],
};

export const options3 = {
  color: ["#00f2f1", "#ed3f35"],
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["Email", "Union Ads"],
    textStyle: {
      color: "#4c9bfd", // 图例文字颜色
    },
    right: "10%", // 距离右边10%
  },
  grid: {
    top: "20%",
    left: "3%",
    right: "4%",
    bottom: "3%",
    show: true,
    borderColor: "#012f4a",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
    axisTick: {
      show: false, // 去除刻度线
    },
    axisLabel: {
      color: "#4c9bfd", // 文本颜色
    },
    axisLine: {
      show: false, // 去除轴线
    },
  },
  yAxis: {
    type: "value",
    axisTick: {
      show: false, // 去除刻度
    },
    axisLabel: {
      color: "#4c9bfd", // 文字颜色
    },
    splitLine: {
      lineStyle: {
        color: "#012f4a", // 分割线颜色
      },
    },
  },
  series: [
    {
      name: "新增粉丝",
      data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      type: "line",
      smooth: true,
      stack: "Total",
    },
    {
      name: "新增游客",
      data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      type: "line",
      smooth: true,
      stack: "Total",
    },
  ],
};

export const options4 = {
  color: ["#00f2f1", "#ed3f35"],
  tooltip: {
    trigger: "axis",
  },
  legend: {
    top: "0%",
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12",
    },
  },
  grid: {
    left: "10",
    top: "30",
    right: "10",
    bottom: "10",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [
      "01",
      "02",
      "03",
      "04",
      "05",
      "06",
      "07",
      "08",
      "09",
      "10",
      "11",
      "12",
      "13",
      "14",
      "15",
      "16",
      "17",
      "18",
      "19",
      "20",
      "21",
      "22",
      "23",
      "24",
      "25",
      "26",
      "26",
      "28",
      "29",
      "30",
    ],
    axisLabel: {
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: 12,
      },
    },
    // x轴线的颜色为   rgba(255,255,255,.2)
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,.2)",
      },
    },
  },
  yAxis: {
    type: "value",
    axisTick: { show: false },
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)",
      },
    },
    axisLabel: {
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: 12,
      },
    },
    // 修改分割线的颜色
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)",
      },
    },
  },
  series: [
    {
      name: "新增粉丝",
      data: [
        30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60,
        20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40,
      ],
      type: "line",
      smooth: true,
      lineStyle: {
        color: "#0184d5",
        width: 2,
      },
      areaStyle: {
        // 渐变色，只需要复制即可
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
            },
            {
              offset: 0.8,
              color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
            },
          ],
          false
        ),
        shadowColor: "rgba(0, 0, 0, 0.1)",
      },
      symbol: "circle",
      symbolSize: 8,
      itemStyle: {
        color: "#0184d5",
        borderColor: "rgba(221, 220, 107, .1)",
        borderWidth: 12,
      },
      // 开始不显示拐点， 鼠标经过显示
      showSymbol: false,
    },
    {
      name: "新增游客",
      data: [
        130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130,
        20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20,
      ],
      type: "line",
      smooth: true,
      lineStyle: {
        normal: {
          color: "#00d887",
          width: 2,
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0, 216, 135, 0.4)",
              },
              {
                offset: 0.8,
                color: "rgba(0, 216, 135, 0.1)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)",
        },
      },
      // 设置拐点 小圆点
      symbol: "circle",
      // 拐点大小
      symbolSize: 5,
      // 设置拐点颜色以及边框
      itemStyle: {
        color: "#00d887",
        borderColor: "rgba(221, 220, 107, .1)",
        borderWidth: 12,
      },
      // 开始不显示拐点， 鼠标经过显示
      showSymbol: false,
    },
  ],
};

export const options5 = {
  color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
  tooltip: {
    trigger: "item",
  },
  legend: {
    // 距离底部为0%
    bottom: "0%",
    // 小图标的宽度和高度
    itemWidth: 10,
    itemHeight: 10,
    data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
    // 修改图例组件的文字为 12px
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12",
    },
  },
  series: [
    {
      name: "年龄分布",
      type: "pie",
      center: ["50%", "50%"],
      radius: ["40%", "60%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1, name: "0岁以下" },
        { value: 4, name: "20-29岁" },
        { value: 2, name: "30-39岁" },
        { value: 2, name: "40-49岁" },
        { value: 1, name: "50岁以上" },
      ],
    },
  ],
};

export const options6 = {
  color: [
    "#006cff",
    "#60cda0",
    "#ed8884",
    "#ff9f7f",
    "#0096ff",
    "#9fe6b8",
    "#32c5e9",
    "#1d9dff",
  ],

  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    left: "center",
    top: "bottom",
    data: [
      "云南",
      "北京",
      "山东",
      "河北",
      "江苏",
      "浙江",
      "四川",
      "湖北",
    ],
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12",
    },
  },
  series: [
    {
      name: "Area Mode",
      type: "pie",
      radius: ["10%", "70%"],
      center: ["50%", "50%"],
      roseType: "radius",
      itemStyle: {
        borderRadius: 5,
      },
      label: {
        fontSize: 10,
      },
      labelLine: {
        // 连接扇形图线长
        length: 6,
        // 连接文字线长
        length2: 8,
      },
      data: [
        { value: 20, name: "云南" },
        { value: 26, name: "北京" },
        { value: 24, name: "山东" },
        { value: 25, name: "河北" },
        { value: 20, name: "江苏" },
        { value: 25, name: "浙江" },
        { value: 30, name: "四川" },
        { value: 42, name: "湖北" },
      ],
    },
  ],
};
